<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar title="类别列表" />

    <!-- 内容区 -->
    <div class="content">
      <!-- 左侧菜单栏 -->
      <div class="left">
        <van-sidebar v-model="leftCurrent">
          <van-sidebar-item
            v-for="item of leftList"
            :key="item.id"
            :title="item.mallCateforyName"
          />
        </van-sidebar>
      </div>

      <!-- 右侧模块 -->
      <div class="right">
        <van-tabs v-model="topCurrent">
          <van-tab
            v-for="item of topList"
            :key="item.id"
            :title="item.mallSubName"
          >
            <div v-for="items of list" :key="items.id" class="list-item">
              <van-image
                class="list-item-img"
                :src="$resetUrl(items.pictureComperssPath)"
                lazy-load
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
                <template v-slot:error>图片失效</template>
              </van-image>
              <div class="list-item-container">
                <p>{{ items.name }}</p>
                <p>{{ items.presentPrice }}</p>
              </div>
            </div>
          </van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- 底部菜单栏 -->
    <tabBar />
  </div>
</template>

<script>
import {
  getCategoryList,
  getCategorySubList,
  getGoodsListByCategorySubID,
} from "@/apis/list.js";
export default {
  props: {
    idx: {
      type: String,
    },
  },
  data() {
    return {
      leftCurrent: this.idx || 0, //左边当前的索引值
      topCurrent: 0, //顶部当前的索引值
      leftList: [], //左边数据
      topList: [], //顶部数据
      list: [], //列表数据
    };
  },
  methods: {
    API_getDetailGoodsInfo() {
      //大类数据接口
      return this.$http.request({
        url: getCategoryList,
      });
    },
    API_getCategorySubList(categoryId) {
      //小类数据接口
      return this.$http.request({
        url: getCategorySubList,
        method: "POST",
        data: {
          categoryId,
        },
      });
    },
    API_getGoodsListByCategorySubID(categorySubId) {
      //列表接口
      return this.$http.request({
        url: getGoodsListByCategorySubID,
        method: "POST",
        data: {
          categorySubId,
        },
      });
    },
    async showList(leftCurrent = 0, topCurrent = 0) {
      let res = await this.API_getDetailGoodsInfo();
      this.leftList = res.data.data;

      let res2 = await this.API_getCategorySubList(
        this.leftList[leftCurrent].id
      );
      this.topList = res2.data.data;

      let res3 = await this.API_getGoodsListByCategorySubID(
        this.topList[topCurrent].id
      );
      this.list = res3.data.data;
    },
  },
  watch: {
    leftCurrent: {
      async handler(val) {
        this.topCurrent = 0;
        this.showList(val);
      },
      immediate: true,
    },
    topCurrent: {
      async handler(val) {
        this.showList(this.leftCurrent, val);
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
.content {
  display: flex;
}
.right {
  flex: 1;
}

.list-item {
  display: flex;
}
.list-item-img {
  width: 200px;
  height: 200px;
}
.list-item-container {
  flex: 1;
}
</style>
